<template>
    <el-dialog width="600px" :visible="showDialog" :title="isEdit?'编辑权限':'新增权限'" @close="btnCancel">
        <el-form ref="addPermission" label-width="140px" :model="dialogList" :rules="rules">
            <el-form-item label="权限名称" prop="name">
                <el-input style="width: 300px;" size="mini" v-model="dialogList.name"></el-input>
            </el-form-item>
            <el-form-item label="权限标识" prop="code">
                <el-input style="width: 300px;" size="mini" v-model="dialogList.code"></el-input>
            </el-form-item>
            <el-form-item label="权限描述" prop="description">
                <el-input style="width: 300px;" type="textarea" :rows="4" size="mini"
                    v-model="dialogList.description"></el-input>
            </el-form-item>
            <el-form-item label="开启" prop="enVisible">
                <el-switch size="mini" active-value="1" inactive-value="0" v-model="dialogList.enVisible"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="12">
                        <el-button type="primary" size="mini" @click="btnOk">确定</el-button>
                        <el-button size="mini" @click="btnCancel">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>


    </el-dialog>

</template>

<script>
import { getPermissionList, addPermission, getPermissionDetail ,updatePermission} from '@/api/permission'

export default {
    name: 'AddPermission',
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        getPid: {
            type: Number,
            default: 0
        },
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogList: {
                name: "",
                code: "",
                description: "",
                type: 1,
                pid: 0,
                enVisible: ""
            },
            rules: {
                name: [
                    { required: true, message: '请输入权限名称', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        validator: async (rule, value, callback) => {
                            let res = await getPermissionList()
                            if (this.isEdit) {
                                res = res.filter(item => item.id !== this.dialogList.id)
                            }
                            if (res.some(item => item.name === value)) {
                                callback(new Error('权限名称重复'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
                code: [
                    { required: true, message: '请输入标识', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        validator: async (rule, value, callback) => {
                            let res = await getPermissionList()
                            if (this.isEdit) {
                                res = res.filter(item => item.id !== this.dialogList.id)
                            }
                            if (res.some(item => item.code === value)) {
                                callback(new Error('标识名称重复'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
            }
        }
    },
    methods: {
        btnOk() {
            this.$refs.addPermission.validate(async valid => {
                if (valid) {
                    if (this.isEdit) {
                        await updatePermission(this.dialogList)
                        this.$message.success('更新成功')
                    } else {
                        if (this.getPid !== 0) {
                            this.dialogList.pid = this.getPid
                            this.dialogList.type = 2
                        }
                        await addPermission(this.dialogList)
                        this.$message.success('新增成功')
                    }

                }
                this.$emit('update-perssion');
                this.btnCancel()
            })

        },
        btnCancel() {
            if (this.isEdit) {
                this.dialogList = {
                name: "",
                code: "",
                description: "",
                type: 1,
                pid: 0,
                enVisible: ""
            }
            this.$emit('update:isEdit', false)
            }
            this.$refs.addPermission.resetFields()
            this.$emit('update:showDialog', false)
        },
        async getPermissionDetail(id) {
            this.dialogList = await getPermissionDetail(id)

        }
    }
}
</script>